<template>
<view>
  <view class="tip">点击图片可以上传</view>
  <view class="category">
    <view class="menu">
      <view class="item" v-for="(item, index) in list" :key="index" :class="{'active' : current === index}" @click="onMenu(item, index)">
        <view class="icon"></view>
        <view class="name">{{ item.name }}</view>
        <view class="edit" @click.stop="onText(item)">编辑</view>
      </view>
    </view>
    <view class="children">
      <view class="item" v-for="(item, index) in children" :key="index">
        <view class="desc">
          <view class="image" @click="openImage(item)">
            <u--image
                class="img"
                lazy-load
                width="240rpx"
                height="240rpx"
                :fade="true" duration="450"
                :src="baseUrl + item.image.thumbnail_path"
                v-if="item.image"></u--image>
          </view>
          <view class="name" @click="onText(item)">
            {{item.name}}
          </view>
          <view class="edit" @click="onText(item)">编辑</view>
        </view>
      </view>
    </view>
  </view>
  <!-- 名称 -->
  <u-modal :show="showText" :title="'修改名称'" showCancelButton @cancel="showText=false" @confirm="saveText">
    <view class="slot-content">
      <u--input
          v-model="text"
          border="surround"
          fontSize="24rpx"
          :customStyle="{'height': '30rpx'}"
          focus
      ></u--input>
    </view>
  </u-modal>
  <!-- 图片 -->
  <u-popup :show="showUpload" @close="showUpload = false">
    <view class="upload">
      <u-upload
          :fileList="fileList"
          width="160rpx"
          height="160rpx"
          :deletable="false"
          @afterRead="afterRead"
      ></u-upload>
    </view>
  </u-popup>
</view>
</template>

<script>
import config from '../../../config/config'
import Shop from '../../../api/shop'
import base64 from '../../../util/base64'
const shopModel = new Shop()

export default {
  props: ['list', 'shop_id'],
  data() {
    return {
      children: [],
      current: 0,
      baseUrl: config.baseUrl,
      text: '',
      id: 0,
      showText: false,
      showUpload: false,
      fileList: [],
      image_id: 0
    }
  },
  updated() {
    // 解决app加载问题
    setTimeout(() => {
      if (this.list.length > 0) {
        this.children = this.list[0].children
      }
    }, 100)
  },
  methods: {
    onMenu(item, index) {
      this.current = index
      this.children = item.children
    },
    onText(item) {
      this.text = item.name
      this.showText = true
      this.id = item.id
    },
    // 保存文字
    saveText() {
      this.showText = false
      shopModel.saveCategoryText({ id: this.id, shop_id: this.shop_id, name: this.text }).then(() => {
        this.$emit('saveText', { id: this.id, text: this.text })
        uni.showToast({
          icon: 'none',
          title: '保存成功'
        })
      })
    },
    openImage(item) {
      this.showUpload = true
      this.image_id = item.id
      console.log(item)
      const url = config.baseUrl + item.image.path
      this.fileList = [{ url }]
    },
    afterRead(e) {
      const { file } = e
      const { url } = file
      const target = `${config.baseUrl}/h5/shop/upload-category?max-width=750&shop_id=${this.shop_id}&id=${this.image_id}`
      // const token = this.$store.getters['User/token']
      // console.log(target, token)
      uni.uploadFile({
        url: target,
        name: 'file',
        filePath: url,
        header: {
          // [config.token_name]: token
        },
        success: response => {
          uni.showToast({
            icon: 'none',
            title: '上传成功'
          })
          let { data } = response
          data = JSON.parse(data)
          const path = data.data.full_name
          const url = config.baseUrl + path
          const list = [{url}]
          this.fileList = list
          this.$emit('upload', { id: this.image_id, image: path })
          // this.$set(this.postForm, 'avatarList', list)
          this.showUpload = false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.upload {
  padding: 50rpx;
}
.tip {
  height: 60rpx;
  color: #999999;
  font-size: 20rpx;
  background: #f3f5f7;
  text-indent: 30rpx;
  display: flex;
  align-items: center;
}
.category {
  display: flex;
  height: calc(100vh - 250rpx);
  /* #ifdef APP-PLUS */
  height: calc(100vh - 350rpx);
  /* #endif */
  //background: #f3f5f7;
  .menu {
    width: 200rpx;
    //background: red;
    overflow-y: auto;
    .item {
      mini-height: 50rpx;
      line-height: 50rpx;
      padding: 25rpx 0 50rpx 0;
      display: flex;
      border-bottom: 1rpx solid #dedede;
      position: relative;
      background: #f3f5f7;
      .icon {
        width: 20rpx;
        border-radius: 20rpx;
        margin-left: -10rpx;
        /*background: #8a6ff0;*/
      }
      .name {
        flex: 1;
      }
      &.active {
        background: white;
        .icon {
          margin-left: 0;
          background: red;
          width: 5rpx;
          margin-right: 15rpx;
        }
        .name {
          color: red;
          //font-weight: 700;
        }
      }
      .edit {
        display: inline-block;
        background: red;
        color: white;
        position: absolute;
        right: 5rpx;
        bottom: 5rpx;
        padding: 0 5px;
      }
    }
  }
  .children {
    flex: 1;
    //background: black;
    overflow-y: auto;
    background: white;
    box-sizing: border-box;
    padding: 20rpx;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-bottom: 10rpx;
    .desc {
      margin-right: 10rpx;
      //background: red;
      width: 245rpx;
      margin-bottom: 20rpx;
      position: relative;
      padding-bottom: 50rpx;
      .image {
        display: flex;
        justify-content: center;
      }
      .name {
        font-size: 24rpx;
        line-height: 60rpx;
        margin-top: 10rpx;
      }
      .edit {
        display: inline-block;
        background: red;
        color: white;
        position: absolute;
        right: 5rpx;
        bottom: 5rpx;
        padding: 0 5px;
      }
    }
  }
}

</style>
